<template>
  <div class="page_content">
    <header>
      <van-nav-bar class="main_header" title="个人信息">
        <template #left>
          <span @click="goBack">返回</span>
        </template>
      </van-nav-bar>
    </header>
    <div class="main_content">
      <template v-for="item in optMenuList">
        <van-cell v-if="item.isShow" :key="item.code" :title="item.name" is-link @click="handleClickMenu(item)" />
      </template>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      optMenuList: [
        {
          code: 'individual/info',
          name: '基础信息',
          isShow: true
        },
        {
          code: 'individual/affiliatedOrgan',
          name: '所属机构/团体',
          isShow: false
        },
        {
          code: 'individual/vipInfo',
          name: '会员信息',
          isShow: true
        },
        {
          code: 'individual/CTRInfo',
          name: '中国跆拳道级段位信息',
          isShow: true
        },
        {
          code: 'individual/ITRInfo',
          name: '国际跆拳道级段位信息',
          isShow: true
        }
      ]
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    currentUserType: {
      handler(val) {
        if (!val) return;
        this.initOpt();
      }
    }
  },
  created() {
    this.gameId = this.$route.params.id;
    this.initOpt();
  },
  methods: {
    initOpt() {
      if (this.currentUserType && this.currentUserType.registerId) {
        this.optMenuList[1].isShow = true;
      } else {
        this.optMenuList[1].isShow = false;
      }
    },
    handleClickMenu(menuItem) {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/${menuItem.code}`
      });
    },
    goBack() {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/`
      });
    }
  }
};
</script>
